/**
* @Author: zmx
* @Date: 2023/9/25
* @Description:
*/
<template>
  <div style="padding: 20px">
    <el-form :inline="true" :model="formInline">
      <el-form-item>
        <el-button type="primary" @click="addRiskModel">+  新增算法模型</el-button>
      </el-form-item>
      <el-form-item label="算法模型名称">
        <el-input v-model="formInline.modelName" placeholder="算法模型名称"></el-input>
      </el-form-item>
      <el-form-item label="对象类型">
        <el-select
          v-model="formInline.modelType"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in optionsList"
            :key="item.id"
            :label="item.itemObjectName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否启用">
        <el-select
          v-model="formInline.isReady"
          value-key="id"
          filterable
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
        <el-button @click="reset">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#006175',color:'#fff'}">
      <el-table-column label="序号" width="50">
        <template v-slot="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="modelName" label="算法模型名称" :show-overflow-tooltip="true" align="center"></el-table-column>
      <el-table-column prop="modelType" label="对象类型" width="100" v-if="optionsList&&optionsList.length>0">
        <template v-slot="scope">
          {{ getObjectType(scope.row.modelType) }}
        </template>
      </el-table-column>
      <el-table-column prop="isReady" label="是否启用" width="100" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.isReady === '1'">是</span>
          <span v-else style="color: red">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
      <el-table-column prop="isUsing" label="使用状态" width="100">
        <template v-slot="scope">
          <span v-if="scope.row.isUsing === '1'" style="color: green">使用中</span>
          <span v-else>未使用</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="250">
        <template v-slot="scope">
          <el-button class="common-btn" @click="editModel(scope.row)">编辑</el-button>
          <el-button class="delete-btn" @click="stopModel(scope.row)" v-if="scope.row.isReady === '1'" :disabled="scope.row.isUsing === '1'">禁用</el-button>
          <el-button class="common-btn" @click="startModel(scope.row)" v-else>启用</el-button>
          <el-button class="common-btn" @click="detailRule(scope.row)">详情</el-button>
          <el-button class="delete-btn" @click="deleteRule(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :page-size="formInline.pageSize"
      layout="total, sizes, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="refreshPageByCondition"
      :current-page.sync="formInline.pageNumber"
      :total="total">
    </el-pagination>
    <modelDialog v-if="ModelDialogShow"
       :ModelDialogShow="ModelDialogShow"
       :modelParam="modelParam"
       @closeDialog="closeDialog"
       @inputData="inputData"></modelDialog>
    <confirmStopDialog v-if="ConfirmDialogShow"
       :ConfirmDialogShow="ConfirmDialogShow"
       @closeDialog="closeConfirmDialog"
       @selectData="confirmDialogSubmit"></confirmStopDialog>
  </div>
</template>

<script>
import {
  startRiskModel,
  stopRiskModel,
  getRiskModelQuery,
  addRiskModel,
  getRiskModelDetail,
  updateRiskModel,
  deleteRiskModel
} from "../../api/risk/riskModel"
import modelDialog from "./modelDialog";
import confirmStopDialog from "./confirmStopDialog"
import {getItemDictObject} from "../../api/risk/commonDict";

export default {
  components:{
    modelDialog,
    confirmStopDialog
  },
  data() {
    return {
      option:[],
      tableData: [],
      formInline: {
        modelName: '',
        modelType: '',
        isReady: '',
        pageSize: 10,
        pageNumber: 1
      },
      modelParam: {},
      total: 0,
      actionParam: {
        modelId: '',
        modelType: '',
        action: ''
      },
      ModelDialogShow: false,
      ConfirmDialogShow: false,
      optionsList:[],
      options:[
        {
          name:'是',
          value:'1'
        },
        {
          name:'否',
          value:'0'
        },
      ]
    };
  },
  mounted() {
    this.getInit()
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getInit()
    },
    addRiskModel(){
      this.modelParam.type = 'add'
      this.modelParam.modelId = ''
      this.modelParam.modelRule = ''
      this.modelParam.modelName = ''
      this.modelParam.modelType = ''
      this.ModelDialogShow = true
    },
    search() {
      this.refreshPageByCondition()
    },
    reset() {
      this.formInline.modelName = ''
      this.formInline.modelType = ''
      this.formInline.isReady = ''
      this.refreshPageByCondition()
    },
    startModel(model){
      this.actionParam.modelId = model.id
      this.actionParam.modelType = model.modelType
      this.actionParam.action = 'start'
      startRiskModel(this.actionParam).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '启用成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    stopModel(model){
      this.ConfirmDialogShow = true
      this.actionParam.modelId = model.id
      this.actionParam.modelType = model.modelType
      this.actionParam.action = 'stop'
    },
    async editModel(model){
      this.modelParam.type = 'edit'
      await this.getModelParam(model)
      this.ModelDialogShow = true
    },
    deleteRule(model) {
      this.$confirm('此操作将删除该算法模型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteRiskModel({modelId:model.id}).then((res)=>{
          if(res && res.code === 200) {
            this.$message({message: '删除成功', type: 'success'})
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      })
    },
    async detailRule(model){
      this.modelParam.type = 'detail'
      await this.getModelParam(model)
      this.ModelDialogShow = true
    },
    async getModelParam(model) {
      await this.getDetail(model.id)
      this.modelParam.modelId = model.id
      this.modelParam.modelName = model.modelName
      this.modelParam.modelType = model.modelType
      this.modelParam.modelRule = model.ruleId
    },
    async getDetail(modelId) {
      await getRiskModelDetail({modelId:modelId}).then((res)=>{
        this.modelParam.itemList = res.itemList
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    closeDialog() {
      this.ModelDialogShow = false
    },
    closeConfirmDialog() {
      this.ConfirmDialogShow = false
    },
    inputData(val) {
      if (val.type === 'add') {
        addRiskModel(val).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '新增成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      } else if (val.type === 'edit') {
        updateRiskModel(val).then((res)=>{
          if(res && res.code === 200){
            this.$message({ message: '更新成功', type: 'success' })
            this.refreshPageByCondition()
          }
        }).catch(err => {
          this.$message({ message: '服务器异常：' + err, type: 'warning' })
        })
      }
    },
    confirmDialogSubmit(val) {
      //监听“弹窗组件”返回的数据
      this.actionParam.actionReason = val
      stopRiskModel(this.actionParam).then((res)=>{
        if(res && res.code === 200){
          this.$message({ message: '禁用成功', type: 'success' })
          this.refreshPageByCondition()
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    },
    getObjectType(type) {
      if (this.optionsList) {
        return this.optionsList.find(item => item.id === type).itemObjectName
      }
      return ''
    },
    getInit(){
      getItemDictObject().then((res)=>{
        if(res){
          this.optionsList = res
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
      this.refreshPageByInit()
    },
    refreshPageByInit() {
      this.refreshPage({page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize})
    },
    refreshPageByCondition() {
      let params = {
        modelType: this.formInline.modelType,
        modelName: this.formInline.modelName,
        isReady: this.formInline.isReady,
        source: 'web',
        page: this.formInline.pageNumber - 1,
        size: this.formInline.pageSize
      }
      this.refreshPage(params)
    },
    refreshPage(params) {
      getRiskModelQuery(params).then((res)=>{
        if(res){
          this.tableData = res.modelList
          this.total = res.modelListSize
        }
      }).catch(err => {
        this.$message({ message: '服务器异常：' + err, type: 'warning' })
      })
    }
  }
}
</script>

<style scoped>

</style>
